<template>
  <div id="teamPage">
    <van-search v-model="searchText" placeholder="请输入搜索队伍关键词" @search="onSearch"/>
    <van-tabs v-model:active="active" @change="onTabChange">
      <van-tab title="公开" name="pub"/>
      <van-tab title="加密" name="pwd"/>
    </van-tabs>
    <van-empty v-if="!teamList || teamList.length<1" description="数据为空"/>
    <TeamCardList :teamList="teamList"/>
    <van-button type="primary" class="add-button" icon="plus" @click="doJoinTeam()"/>
  </div>


</template>
<script setup>
import {onMounted, ref} from "vue";
import TeamCardList from "../components/TeamCardList.vue";
import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios.ts";

name:'Team'

const active = ref("pub")
const searchText = ref()
const teamList = ref([])
const router = useRouter();
const doJoinTeam = () => {
  router.push({
    path: "/team/add"
  })
}
/**
 *
 * @param val 搜索框内容
 * @param status  队伍状态
 * @returns {Promise<void>}
 */
const listTeam = async (val = null, status = 0) => {
  const res = await myAxios.get('/team/list', {
    params: {
      searchText: val,
      pageNum: 1,
      status: status
    }
  })
  if (res.code === 0) {
    teamList.value = res.data
  } else {
    console.log('error')
  }
}
onMounted(() => {
  listTeam()
  console.log(teamList)
})
const onSearch = (val) => {
  listTeam(val)
}
/**
 * 切换查询状态
 * @param name
 */
const onTabChange = (name) => {
  if (name === "pub") {
    listTeam(searchText.value, 0)
  } else {
    listTeam(searchText.value, 2)
  }

}
</script>
<style scoped>
.add-button {
  margin-bottom: 40px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 50px;
}
</style>